<template>
    <form class="mui-input-group">
        <div class="mui-input-row">
            <label class="tit">收件人</label>
            <input 姓v-model="form.name" type="text" class="mui-input-clear" placeholder="请输入收件人名">
        </div>
        <div class="mui-input-row">
            <label class="tit">联系方式</label>
            <input v-model="form.tel" type="text" class="mui-input-clear" placeholder="请输入手机号">
        </div>
        <div class="mui-input-row">
            <label class="tit">所在地区</label>
            <input v-model="form.area" type="text" class="mui-input-clear" placeholder="所在地区" @click="choose">
            <div class="divwrap">
                <div class="mask" @click="choose" v-show="show"></div>
                <v-distpicker
                    v-show="show"
                    type="mobile"
                    @province="onChangeProvince"
                    @city="onChangeCity"
                    @area="onChangeArea"
                    :province="newInfo.province"
                    :city="newInfo.city"
                    :area="newInfo.district"
                >
                </v-distpicker>
            </div>
        </div>
        <div class="mui-input-row">
            <label  class="tit">详细地址</label>
            <input v-model="form.detail" type="text" class="mui-input-clear" placeholder="请输入详细地址">
        </div>
        <div class="mui-button-row">
            <button @click="save" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认</button>
            <button v-show="id" @click="del" type="button" class="mui-btn mui-btn-danger mui-btn-block">删除</button>
        </div>
    </form>
</template>
<script>
import VDistpicker from 'v-distpicker'
export default {
    save () {
  this.$indicator.open({
    text: '提交中'
  })
  this.$http.post('address/save', this.form).then(res => {
    this.$indicator.close()
if (res.data.code === 0) {
    this.$toast(res.data.msg)
  } else if (res.data.code === 1) {
    this.$toast(res.data.msg)
    this.$router.go(-1)
  } else if (res.data.code === 2) {
    this.$router.push({ name: 'login' })
  }
    window.console.log(res.data)// 后台命令行里输出Object
  })
},
  data () {
    return {
      form: {
        name: '',
        tel: '',
        area: '',
        detail: ''
      },
    show:false,
    newInfo:{
        province:'',
        city:'',
        area:'',
    }
    }
  },
props: ['id'],
created () {
  this.getAddress()
},
  methods: {
      getAddress () {
    if (!this.id) {
      return
    }
    this.$indicator.open({
      text: '加载中'
    })
    var params = { id: this.id }
    this.$http.get('address/edit', { params: params }).then(res => {
      this.$indicator.close()
if (res.data.code === 0) {
    this.$toast(res.data.msg)
  } else if (res.data.code === 1) {
    this.form = res.data.data
  } else if (res.data.code === 2) {
    this.$router.push({ name: 'login' })
  }
      window.console.log(res.data)
    })
  },
    save () {
    this.$indicator.open({
    text: '提交中'
  })
    this.form.id = this.id
      window.console.log('确认')
    },
 choose () {
    this.show = !this.show
  },
  onChangeProvince (data) {
    this.newInfo.province = data.value
  },
  onChangeCity (data) {
    this.newInfo.city = data.value
  },
  onChangeArea (data) {
    this.newInfo.area = data.value
    this.form.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.area
    this.show = false
  },
del () {
    this.$indicator.open({
      text: '删除中'
    })
    this.form.id = this.id
    this.$http.post('address/del', this.form).then(res => {
      this.$indicator.close()
if (res.data.code === 0) {
    this.$toast(res.data.msg)
  } else if (res.data.code === 1) {
    this.$toast(res.data.msg)
    this.$router.go(-1)
  } else if (res.data.code === 2) {
    this.$router.push({ name: 'login' })
  }
      window.console.log(res.data)
    })
  }
  },
components: {
    'v-distpicker': VDistpicker
  }
}
</script>
<style lang="scss" scoped>
.mui-input-group .mui-button-row {
    height: auto;
}
.mui-input-clear{
    font-size: 14px;
}
.mui-input-group:before{
    list-style: none;
}
.mui-button-row{
    margin-top: 20px;
    button{
        margin: 20px 0;
        padding: 10px 0;
    }
}
.tit{
    color: #999;
}
input::-webkit-input-placeholder {
    color: #999;
}
input::-moz-placeholder{
    color: #999;
}
input:-moz-placeholder{
    color: #999;
}
input:-ms-input-placeholder {
    color: #999;
}
.divwrap > .mask{
    background: #000;
    opacity:0.3;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.divwrap > .distpicker-address-wrapper{
    color: #999;
    background: #fff;
    border-top: 1px solid #ccc;
    z-index: 1;
    height: 300px;
    overflow-y: auto;
    position: fixed;
    left: 0;
    bottom: 0;
    width:100%;
}
</style>